import React from 'react';
import { useNode } from '@craftjs/core';
import { Tabs, Radio, Switch, Input } from 'antd';
import { CodeOutlined, CloseOutlined } from '@ant-design/icons';
import AntIconSelect from '@/components/AntIconSelect';
import styles from './settings.less';

const typeOptions = [
  { label: '默认', value: 'default' },
  { label: '主按钮', value: 'primary' },
  { label: '透明', value: 'ghost' },
  { label: '虚线', value: 'dashed' },
  { label: '链接', value: 'link' },
  { label: '文本', value: 'text' },
];
const shapeOptions = [
  { label: '默认', value: 'default' },
  { label: '圆形', value: 'circle' },
  { label: '圆角', value: 'round' },
];
const sizeOptions = [
  { label: '小', value: 'small' },
  { label: '中', value: 'middle' },
  { label: '大', value: 'large' },
];
const blockOptions = [
  { label: '否', value: false },
  { label: '是', value: true },
];
const dangerOptions = [
  { label: '否', value: false },
  { label: '是', value: true },
];

export default () => {
  const {
    props: { text, type, shape, size, block, danger, iconName, disabled, loading },
    actions: { setProp },
  } = useNode((node) => ({
    props: node.data.props,
  }));

  return (
    <div className={styles.settingContainer}>
      <Tabs>
        <Tabs.TabPane key="attribute" tab="属性">
          <div className={styles.settingContainerContent}>
            <div className={styles.textControl}>
              <div>按钮文本：</div>
              <Input
                size="small"
                value={text}
                onChange={(e) => {
                  setProp((props) => (props.text = e.target.value), 500);
                }}
              />
            </div>
            <div className={styles.typeControl}>
              <div>按钮类型：</div>
              <Radio.Group
                size="small"
                optionType="button"
                value={type}
                options={typeOptions}
                onChange={(e) => {
                  setProp((props) => (props.type = e.target.value), 500);
                }}
              />
            </div>
            <div className={styles.shapeControl}>
              <div>按钮形状：</div>
              <Radio.Group
                size="small"
                optionType="button"
                value={shape}
                options={shapeOptions}
                onChange={(e) => {
                  setProp((props) => (props.shape = e.target.value), 500);
                }}
              />
            </div>
            <div className={styles.sizeControl}>
              <div>按钮大小：</div>
              <Radio.Group
                size="small"
                optionType="button"
                value={size}
                options={sizeOptions}
                onChange={(e) => {
                  setProp((props) => (props.size = e.target.value), 500);
                }}
              />
            </div>
            <div className={styles.blockControl}>
              <div>块级按钮：</div>
              <Radio.Group
                size="small"
                value={block}
                options={blockOptions}
                onChange={(e) => {
                  setProp((props) => (props.block = e.target.value), 500);
                }}
              />
            </div>
            <div className={styles.blockControl}>
              <div>危险按钮：</div>
              <Radio.Group
                size="small"
                value={danger}
                options={dangerOptions}
                onChange={(e) => {
                  setProp((props) => (props.danger = e.target.value), 500);
                }}
              />
            </div>
            <div className={styles.iconControl}>
              <div>按钮图标：</div>
              <AntIconSelect
                value={iconName ? { iconName, iconLibrary: 'antD' } : null}
                onChange={(opt) => {
                  if (_.isPlainObject(opt)) {
                    const { iconName } = opt;
                    setProp((props) => (props.iconName = iconName), 500);
                  } else {
                    setProp((props) => (props.iconName = ''), 500);
                  }
                }}
              />
              {!!iconName && (
                <div
                  className={styles.iconControlDelete}
                  onClick={() => {
                    setProp((props) => (props.iconName = ''), 500);
                  }}
                >
                  <CloseOutlined />
                </div>
              )}
            </div>
            <div className={styles.disabledControl}>
              <div>禁用：</div>
              <Switch
                checked={disabled}
                onChange={(checked) => {
                  setProp((props) => (props.disabled = checked), 500);
                }}
              />
              <div className={styles.codeBindingHandle} title="变量绑定">
                <CodeOutlined className={styles.codeBindingHandleIcon} />
              </div>
            </div>
            <div className={styles.loadingControl}>
              <div>loading：</div>
              <Switch
                checked={loading}
                onChange={(checked) => {
                  setProp((props) => (props.loading = checked), 500);
                }}
              />
              <div className={styles.codeBindingHandle} title="变量绑定">
                <CodeOutlined className={styles.codeBindingHandleIcon} />
              </div>
            </div>
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane key="event" tab="事件">
          <div className={styles.settingContainerContent}>---------事件绑定--------- onClick</div>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};
